<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-15 20:33:46
 * @LastEditors: cxguo
 * @LastEditTime: 2019-12-17 14:40:37
 -->
<template>
  <div>
    <el-alert
      :closable="false"
      type="info"
      title="当前分类:"
    >
      <div class="fontsize14 paddingTb5">
        {{ currentText }}
        <el-link type="primary" @click="cancleSelect">取消</el-link>
      </div>
    </el-alert>
    <el-tree
      class="tree"
      :data="cateData"
      :props="defaultProps"
      :render-content="renderContent"
      :default-expand-all="true"
      v-on="$listeners"
      @node-click="handleNodeClick"
    />
    <div v-if="isOper" class="padding10 margin-w-auto">
      <el-button type="primary" size="small" @click="btnShowDialog">新增</el-button>
      <el-popover
        v-model="popover.visible"
        placement="top"
        width="160"
      >
        <p>确定要删除分类<br>{{ currentNode.text }}吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="popover.visible = false">取消</el-button>
          <el-button
            type="primary"
            size="mini"
            :loading="btnLoading.del"
            @click="btnDel"
          >确定</el-button>
        </div>
        <el-button
          slot="reference"
          :disabled="!currentNode.id"
          type="danger"
          size="small"
        >删除</el-button>
      </el-popover>
    </div>
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      append-to-body
      width="30%"
    >
      <el-input v-model="cateData.name" placeholder="请输入分类名称" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading.save" @click="btnSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { saveData, delData } from '@/api/goods/cate.js'
import { oftenuse } from '@/libs/mixins'
import { listData as listCateData } from '@/api/goods/cate'

export default {
  name: 'CateTree',
  mixins: [oftenuse],
  props: {
    /**
     * 是否显示增删按钮
     */
    isOper: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示确定按钮
     */
    isSure: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cateData: [],
      dialog: {
        title: '新增分类',
        visible: false
      },
      popover: {
        visible: false
      },
      currentNode: {},
      cateTreedata: [],
      defaultProps: {
        children: 'children',
        label: 'text'
      }
    }
  },
  computed: {
    'currentText': function() {
      return this.currentNode.text || '没有选中'
    }
  },
  created() {
    this.listCateData()
  },
  methods: {
    btnShowDialog() {
      this.addData()
    },
    btnSave() {
      if (!this.cateData.name) return this.$message.error('请输入分类名!')
      if (!this.currentNode.id) return this.$message.error('请选择分类父级!')
      const params = {
        name: this.cateData.name,
        pid: String(this.currentNode.id)
      }
      this.setBtnLoading('save', true)
      this.saveData(params).then(res => {
        this.setBtnLoading('save', false)
        if (res.data.flag) this.dialog.visible = false
      })
    },
    btnDel() {
      const params = this.currentNode.id
      this.setBtnLoading('del', true)
      this.delData(params).then(res => {
        this.setBtnLoading('del', false)
        if (res.data.flag) this.dialog.visible = false
      })
    },
    // 对外接口
    addData() {
      this.dialog.visible = true
    },
    updateData() {
      this.$set(this.currentNode, 'edit', true)
    },
    // api
    saveData(params) {
      return new Promise((resolve, reject) => {
        saveData(params).then(res => {
          resolve(res)
          this.$notify[res.data.flag ? 'success' : 'error'](res.data.message)
          this.listCateData(true)
        }).catch(err => {
          this.$notify.error({ title: '保存异常！', message: err.message })
          reject(err)
        })
      })
    },
    delData(params) {
      return delData(params).then(res => {
        this.$notify[res.data.flag ? 'success' : 'error'](res.data.message)
        if (res.data.flag) {
          this.currentNode = {}
          this.listCateData(true)
        }
      })
    },
    cancleSelect() {
      this.currentNode = {}
    },
    handleNodeClick(data) {
      // const cateData = clonedeep(data)
      this.currentNode = data
    },
    listCateData(refresh = false) {
      listCateData().then(res => {
        if (res.data.flag) {
          const data = JSON.parse(res.data.data)
          const cateData = data[0].children
          this.cateData = cateData
        }
      })
    },
    renderContent(h, { node, data, store }) {
      const { text, id } = data
      if (id !== this.currentNode.id) return <span>{text}</span>
      if (this.currentNode.edit) {
        const _this = this
        const data = {
          props: {
            size: 'mini'
          },
          attrs: {
            style: 'width:100px;'
          },
          on: {
            'blur': function(e) {
              const currentNode = _this.currentNode
              _this.$set(currentNode, 'edit', false)
              const params = {
                id: currentNode.id,
                name: currentNode.text
              }
              _this.saveData(params)
            }
          },
          model: {
            value: text,
            callback(value) {
              _this.$set(node.data, 'text', value)
            }
          }
        }
        return (
          <el-input {...data} />
        )
      } else {
        return (<span>{text}</span>)
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.tree{
  /deep/.el-tree-node__content span{
    font-size: 14px;
  }
  /deep/.el-input__inner{
    height:24px;
  }
}
</style>
